<template>
	<el-dialog
		:title="cuFromTitle"
		v-model="cuVisible"
		width="1200px"
		top="0"
		:destroy-on-close="true"
		:close-on-click-modal="false"
		:close-on-press-escape="false"
		:show-close="false"
	>
		<div>
			<el-tabs v-model="activeName" class="demo-tabs">
				<el-tab-pane label="包含" name="include">
					<div>
						商品规则：
						<el-radio-group v-model="form.goods_type" @change="goodsTypeChange">
							<el-radio v-for="item in goodsTypeOptions" :key="item.value" :label="item.value">{{item.label}}</el-radio>
						</el-radio-group>
					</div>
					<div v-show="form.goods_type !== 0" style="position: absolute; right: 15px;z-index: 1;">
						<el-button
							size="mini"
							style="margin-left: 15px"

							@click="openSelectDialogGoods"
						>添加</el-button
						>
					</div>
					<select-goods-table-goodsid
						ref="selectGoodsTable"
						mode="show"
						v-show="form.goods_type !== 0"
						:isShowOpsBtn="true"
						@selectChange="goodsTableSelectChange"
					/>
				</el-tab-pane>
				<el-tab-pane label="排除" name="exclude">
					<el-row>
						<el-col :span="24">
							<exclude-goods-box ref="excludeGoodsBox" :baseUrl="baseUrl" v-model="form.exclude_goods_ids" />
						</el-col>
					</el-row>
				</el-tab-pane>
			</el-tabs>

		</div>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="hideForm" :loading="btnLoad" size="mini">取消</el-button>
				<el-button type="primary" :loading="btnLoad" size="mini" @click="cuFormSubmit">提交</el-button>
			</div>
		</template>
	</el-dialog>
	<select-dialog-goodsid ref="selectDialog" @select="SelectDialogGoodsCb"></select-dialog-goodsid>
</template>

<script>
import { ElMessage } from "element-plus";
import SelectDialogGoodsid from "../../shop/diyPage/selectDialogGoodsId.vue";
import SelectGoodsTableGoodsid from "../../shop/diyPage/selectGoodsTableByGoodsId.vue";
import excludeGoodsBox from "../components/excludeGoodsBox";

export default {
	name: "shop-goods-activity-goods",
	components: { SelectGoodsTableGoodsid, SelectDialogGoodsid, excludeGoodsBox },
	props: {
		baseUrl: { type: String, default: "" }
	},
	emits: ["success"],
	data() {
		return {
			// 如果为0时为添加
			activityId: 0,
			btnLoad: false,
			cuVisible: false,
			shopCategorys: [],
			activeName: 'include',
			form: {
				goods_type: 0,
				goods_ids: [],
				exclude_goods_ids: []
			},
			goodsSelects: [],
			// 商品类型 0全部 1包含 2排除
			goodsTypeOptions: [
				{
					label: "全部",
					value: 0
				},
				{
					label: "指定商品可用",
					value: 1
				}
			]
		};
	},
	computed: {
		cuFromTitle() {
			return "活动商品";
		}
	},
	mounted() {
		this.getsShopCategorys()
	},
	methods: {
		hideForm() {
			this.cuVisible = false;
		},
		show(_activityId) {
			this.getData(_activityId);
			this.activityId = _activityId;
			this.cuVisible = true;
		},
		getData(_activityId) {
			this.$API.shop.goodsActivity
				.info({ id: _activityId })
				.then((res) => {
					console.log(res);
					if (res.code === 0) {
						this.form.goods_type = res.data.goods_type;
						this.form.goods_ids = res.data.goods_ids;
						// this.form.exclude_goods_ids = res.data.exclude_goods_ids;
						this.$refs.excludeGoodsBox.setExcludeGoodsIds(res.data.exclude_goods_ids)
						this.goodsSelects = res.data.goods_ids;
						this.$refs.selectGoodsTable.initData("show", this.baseUrl, this.goodsSelects);
					}
					else{
						this.$message.error(res.message);
					}
				})
				.catch((err) => {
					ElMessage.error("失败," + err);
				});
		},
		cuFormSubmit() {
			this.btnLoad = true;

			setTimeout(() => {
				this.btnLoad = false;
			}, 10000);
			if (this.form.goods_type > 0) {
				this.form.goods_ids = this.goodsSelects;
			} else {
				this.form.goods_ids = [];
			}
			let excludeGoodsIds = this.form.exclude_goods_ids.map(e => e.id);
			this.$API.shop.goodsActivity
				.update({ id: this.activityId, goods_type: this.form.goods_type, goods_ids: this.form.goods_ids,
					exclude_goods_ids: excludeGoodsIds})
				.then((res) => {
					if (res.code === 0) {
						ElMessage.success("提交成功");
						this.formSuccess();
					}
					else {
						ElMessage.error(res.message);
					}
				})
				.catch((err) => {
					ElMessage.error("失败," + err);
				});
		},
		formSuccess() {
			this.btnLoad = false;
			this.cuVisible = false;
			console.log(this.form);
			this.$emit("success", this.form);
		},
		formFail() {
			this.btnLoad = false;
		},
		goodsTypeChange() {

		},
		SelectDialogGoodsCb(selects) {
			selects.map((e) => {
				if (!this.goodsSelects.includes(e)) {
					this.goodsSelects.push(e);
				}
			});
			if (this.$refs.selectGoodsTable) {
				this.$refs.selectGoodsTable.initData("show", this.baseUrl, this.goodsSelects);
			}
		},
		goodsTableSelectChange(selectData) {
			this.goodsSelects = selectData;
		},
		openSelectDialogGoods() {
			this.$refs.selectDialog.create();
		},
		getMoneyByMinute(_val) {
			return this.$TOOL.getMoneyByMinute(_val);
		},
		getsShopCategorys() {
			this.$API.shop.category
				.list({
					type_str: "shop"
				})
				.then((res) => {
					this.shopCategorys = this.$TOOL.deepTree(res.data, "parent_id");
				});
		},
	}
};
</script>

<style lang="scss" scoped>
.select-trigger.el-tooltip__trigger.el-tooltip__trigger{
	position: relative;
}
</style>
